<template>
  <div id="addsortmang">
    <p class="addsort">编辑分拣主管</p>
    <!-- 表格 -->
    <div class="form" style="width:340px;margin:20px auto">
      <el-form
        ref="mangerinfo"
        label-position="left"
        label-width="100px"
        :model="mangerinfo"
        :rules="rules"
      >
        <el-form-item label="分拣主管" label-width="100px">
          <el-input v-model="mangerinfo.name" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="mangerinfo.phone" />
        </el-form-item>
        <el-form-item label="分拣线">
          <el-select
            v-model="mangerinfo.sortLineName"
            placeholder="请选择"
            @change="handelsortId"
          >
            <el-option
              v-for="item in sortLineIds"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班次">
          <el-select
            v-model="mangerinfo.workTypeName"
            placeholder="请选择"
            @change="handelworktype"
          >
            <el-option
              v-for="item in workStatu"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="每天最大产能" prop="phone">
          <el-input v-model="mangerinfo.maxCapacity" />
        </el-form-item>
      </el-form>
      <el-row style="text-align: center;margin-top:40px;">
        <el-button @click="cancle()">取消</el-button>
        <el-button type="primary" class="confirm" @click="editconfirm()"
          >确认</el-button
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import { addsortmanger, inquiresortline } from "@/api/sortmanage.js";
export default {
  data() {
    // 设置手机号的验证规则
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入联系方式"));
      } else {
        const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的电话"));
        }
      }
    };
    return {
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }]
      },
      mangerinfo: {
        phone: "",
        name: "",
        sortLineId: "",
        workTypeName: "",
        id: "",
        workStatus: "",
        workType: "",
        maxCapacity:""
      },
      sortLineIds: [],
      workStatu: [
        {
          value: 1,
          label: "早班"
        },
        {
          value: 2,
          label: "晚班"
        }
      ],
      value: ""
    };
  },
  mounted() {
    this.init();
    inquiresortline()
      .then(res => {
        console.log(res);
        var arr = [];
        arr = res.rows.map((i, v) => {
          return { value: i.id, label: i.sortinglineName };
        });
        this.sortLineIds = arr;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    init() {
      console.log(this.$route.query);
      this.mangerinfo = this.$route.query;
    },
    handelsortId(value) {
      this.mangerinfo.sortLineId = value;
    },
    handelworktype(value) {
      console.log(value);
      this.mangerinfo.workType = value;
    },
    cancle() {
      this.$router.push({ path: "sortingPlan" });
    },
    editconfirm() {
      this.$refs.mangerinfo.validate(valid => {
        if (valid) {
          const data = {
            id: this.mangerinfo.id,
            sortLineId: this.mangerinfo.sortLineId,
            workStatus: this.mangerinfo.workType,
            phone: this.mangerinfo.phone,
            name: this.mangerinfo.name,
            maxCapacity:this.mangerinfo.maxCapacity
          };
          addsortmanger(data)
            .then(res => {
              console.log(res);
              if (res.code === 20000) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.$router.push({ path: "sortingPlan" });
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            })
            .catch(err => {
              console.log(err);
              this.$message({
                type: "error",
                message: err.message
              });
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#addsortmang {
  padding: 20px 20px;
  .addsort {
    font-size: 22px;
  }
  .confirm {
    margin-left: 30px;
  }
}
</style>
